<template>
    <section>
        <el-form :inline="true" :model="filters" ref="filters" label-width="60px" class="mt-20">
            <el-form-item prop="year" label="按年份">
                <el-select
                    placeholder="年份"
                    v-model="filters.year"
                    @change='selectYear'
                    size="18px">
                    <el-option
                        v-for="item in options.years"
                        :key="item"
                        :label="item"
                        :value="item"/>
                </el-select>
            </el-form-item>
        </el-form>
        <el-card class="box-card" v-if="tableData.reportDto.status != ''">
            <el-row >
                <el-col :span="24">
                    <div class="grid-content title">
                        <h4>{{ tableData.reportDto.title }}  &nbsp;</h4>
                        <p>
                            <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.reportDto.status]  }} &nbsp; <span v-if="tableData.reportDto.lastCorrectiveReportId">(第二阶段)</span>
                        </p>
                        <p>
                            <span>整改完成比例 :</span> {{ tableData.reportDto.total_fix_bugs }} /  {{ tableData.reportDto.total_bugs }}  &nbsp;
                        </p>
                    </div>
                </el-col>
            </el-row>
            <el-row style="padding:10px 0"  :gutter="20">
                <el-col :span="6" >
                    <div class="step-bar">
                        <span>第一阶段整改</span>

                        <el-button
                                @click="ceratedReport(1)"
                                type="primary"
                                v-if="(tableData.reportDto.status === 1  ||  tableData.reportDto.status === 12) && !tableData.reportDto.lastCorrectiveReportId "
                        > 创建整改报告</el-button>

                        <el-button
                                @click="checkReportInfo(1)"
                                type="primary"
                                v-if=" tableData.reportDto.status !== 1 || tableData.reportDto.lastCorrectiveReportId"
                        > 查看报告详情 </el-button>
                    </div>
                </el-col>
                <el-col :span="6" v-if="tableData.reportDto.lastCorrectiveReportId">
                    <div class="step-bar">
                        <span>第二阶段整改</span>

                        <el-button
                                @click="ceratedReport(2)"
                                type="primary"
                                v-if="tableData.reportDto.status === 1  || tableData.reportDto.status === 12"
                        > 创建整改报告 </el-button>

                        <el-button
                                @click="checkReportInfo(2)"
                                type="primary"
                                v-if="tableData.reportDto.status !== 1 &&   tableData.reportDto.status !== 12"
                        > 查看报告详情 </el-button>
                    </div>
                </el-col>
            <!-- <el-col :span="3"
                        v-if="tableData.reportDto.status == 2 || tableData.reportDto.status == 3 || tableData.reportDto.status == 4 || tableData.reportDto.status == 5"
                >
                    <el-button
                            @click="checkReportInfo"
                            type="primary"
                    > 查看报告详情 </el-button>
                </el-col>-->
              <!--  <el-col :span="3">

                    <el-button
                            @click="ceratedReport"
                            :type="tableData.reportDto.status == 1 || tableData.reportDto.status == 12 ? 'primary' : 'info'"
                            :disabled="tableData.reportDto.status != 1 && tableData.reportDto.status != 12"
                    > 创建整改报告 </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button
                            @click="editReport"
                            :type="tableData.reportDto.status == 11 || tableData.reportDto.status == 21 || tableData.reportDto.status == 41 ? 'primary' : 'info'"
                            :disabled="tableData.reportDto.status != 11 && tableData.reportDto.status != 21 && tableData.reportDto.status != 41 "
                    > 编辑整改报告 </el-button>
                </el-col>
                <el-col :span="5">
                    <el-button
                            :type="tableData.reportDto.status == 3 ? 'primary' : 'info'"
                            :disabled="tableData.reportDto.status != 3"
                            @click="submitReportDialogFun"
                    > 提交正式整改文件 </el-button>
                    <span v-if="tableData.reportDto.status == 3" style="display:block; font-size:12px; color:#888; padding:5px 0 0">请<el-button type="text" @click="dowFile(basis_url + formalFileTemp)" style="font-size:12px; padding:8px!important;">下载整改报告 </el-button>后，附上公章再上传</span>
                </el-col>-->
            </el-row>
            <el-table
                    :data="tableData.correctiveLogDtos"
                    v-loading="listLoading"
                    style="width: 100%; margin-top:20px;">
                <el-table-column
                        align="center"
                        label="序号"
                        width="80px"
                        type="index">
                </el-table-column>
                <el-table-column
                        label="操作者"
                        prop="opt_user_name">
                </el-table-column>
                <el-table-column
                        label="操作"
                        prop="opt_desc">
                </el-table-column>
                <el-table-column
                        align="left"
                        label="处理意见"
                        prop="suggestion" >
                    <template slot-scope="scope">
                        <el-popover placement="right-end" title="处理意见" width="250" trigger="hover" v-if="scope.row.suggestion && scope.row.suggestion.length > 10" >
                            <div>{{scope.row.suggestion}}</div>
                            <span slot="reference">{{ substrLength(scope.row.suggestion) }}</span>
                        </el-popover>
                        <div v-else>{{scope.row.suggestion}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作日期"
                        prop="gmt_created">
                </el-table-column>
                <el-table-column label="相关文档" align="left" width="400" prop="files">
                    <template slot-scope="scope">
                        <div>
                            <div v-for="(itemFile, indexFile) in scope.row.files" :key="indexFile" >
                                <a href="javascript:;" style="max-width:200px;" type="primary" @click="downloadFile(itemFile.path,itemFile.origin_name )">
                                    {{ itemFile.origin_name }}
                                </a>
                            </div>
                            <div v-if="scope.row.corrective_file">
                                <a href="javascript:;" type="primary"
                                   @click="downloadFile(scope.row.corrective_file.path, scope.row.corrective_file.origin_name )"
                                >
                                    {{ scope.row.corrective_file.origin_name }}
                                </a>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card" v-else>
            <span style="color:#c1c1c1; display:block;text-align:center;">
                暂无数据
            </span>
        </el-card>

    </section>
</template>

<script>
    import dict from '../../common/js/dict';
    import { getCorrectedProgress, submitReportFormalFile, get_file} from '../../api/corrected_api'
    import {upload_file} from "../../api/common";
    import { saveAs } from '../../common/js/commons';

    export default {
        data() {
            return {
                //表格数据
                dict: dict,
                tableData: {
                    reportDto:{
                        title:'',
                        status:'',
                        total_fix_bugs:'',
                        total_bugs: ''
                    }
                },
                basis_url: '',
                basisInfo: {
                    unit_id: this.$store.state.userInfo.unit_id
                },
                listLoading: false,

                submitReportDialog: false,
                submitReportDialogStatus: false,
                filters: {
                    year: ''
                },

                options: {
                    years: []
                },
                formalFileTemp:''
            }
        },
        created() {
            this.initYears()
            this.interval = setInterval(() => {
                this.getTableData()
            },200)
        },

        methods: {
            review() {
                this.$router.push('/corrected/review/' + this.$route.params.id);
            },
            downloadFile(url, name){
                saveAs(url, name)
            },
            substrLength(str){
                if(str && str.length > 10){
                    return str.substring(0,10) + '...'
                } else {
                    return str
                }
            },
            initYears() {
                this.currentYear = (new Date()).getFullYear();
                this.filters.year = this.currentYear;
                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            getTableData(){
                if(this.$store.state.userInfo.unit_id == undefined) return false;
                clearInterval(this.interval)
                this.listLoading = true;
                let params = {
                    unit_id:  this.$store.state.userInfo.unit_id,
                    year: this.filters.year
                }

                getCorrectedProgress(params).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        this.tableData = temp_data;
                        // if(temp_data.reportDto.status == 3) {
                        //     this.formalFileTemp = temp_data.correctiveLogDtos[temp_data.correctiveLogDtos.length -1].files[temp_data.correctiveLogDtos[temp_data.correctiveLogDtos.length -1].files.length - 1].path
                        // }

                        this.listLoading = false;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        if(res.data.status == 505){
                            this.tableData = {
                                reportDto:{
                                    title:'',
                                        status:'',
                                        total_fix_bugs:'',
                                        total_bugs: ''
                                }
                            }
                        }
                        this.listLoading = false;
                        if(res.data.msg != '该学校未创建整改报告') return this.$message.error(res.data.msg);
                    }
                })
            },

            checkReportInfo(step=1) {

             let id =""
                if (this.tableData.reportDto.lastCorrectiveReportId){
                    id = this.tableData.reportDto.lastCorrectiveReportId
                } else{
                    id =  this.tableData.reportDto.id
                }
              if (step === 1){
                  this.$router.push('/univ_corrected/detail/' +  id +'?s='+step)
              } else{
                  this.$router.push('/univ_corrected/detail/' +   this.tableData.reportDto.id +'?s='+step )

              }
            },
            ceratedReport(step=1) {
              this.$router.push('/univ_corrected/edit/' +  this.tableData.reportDto.id+'?s='+step )
            },
          /*  editReport() {
              this.$router.push('/univ_corrected/detail/' + this.tableData.reportDto.id )
            },*/
            selectYear(e) {
                this.filters.year = e
                this.getTableData()
            },

        }
    }
</script>

<style scoped lang="scss">
    .mt-20{
        margin-top: 20px;
    }
    .box-card {
        .grid-content {
            &.title {
                h4 {
                    font-size: 24px;
                    color: #101010;
                    margin: 0;
                }
                p {
                    display: inline-block;
                    // width: 280px;
                    margin-right:20px;
                    color: #333;
                    span {
                        color: #888;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .step-bar{
        max-width:350px;
        background:#ecf5ff ;
        width:100%;
        padding:6px 20px;
        position: relative;
        box-sizing: border-box;
        button{
            position:absolute;
            right:20px;
            top:10px;
        }
        .span{
            font-size:20px;

        }
    }
    .submit-report-dialog .el-dialog:before{
        content:'';
        position:absolute;
        top:10px;
        right:50px;
        width:350px;
        text-align:right;
        line-height: 20px;

    }
    .upload-demo.release-upload{
        width:100%;
        padding-bottom:30px;
        .el-upload{
            width:100%;
            .el-upload-dragger{
                width:100%;
            }
        }
    }
</style>
